<template>
  <div>
    <div style="width: 100%; max-width: 640px; margin: 0 auto">
      <van-nav-bar
        class="niv"
        title="商品评价"
        @click-left="$router.go(-1)"
        left-text="返回"
        left-arrow
        :border="false"
      >
        <template #right>
          <van-icon name="ellipsis" size="25" />
        </template>
      </van-nav-bar>
    </div>
    <div style="width: 100%; height: 2.85rem; overflow: hidden"></div>
    <!-- <div v-if="evList.length == 0" class="null">
      <van-empty description="暂无更多评价" />
    </div> -->
    <div class="xqpj">
      <div v-if="evList.length == 0" class="null">
        <van-empty description="暂无更多评价" />
      </div>

      <div v-else class="xqpjbox" v-for="item in evList" :key="item.con_id">
        <div class="pj1">
          <img :src="iconUrl + item.userPic" />
          <span>{{ item.userName }}</span>
          <div>
            <van-rate
              style="margin-top: 4px; margin-left: 7px"
              v-model="item.Description_level"
              :size="14"
              readonly
              color="#ffd21e"
              void-icon="star"
              void-color="#eee"
            />
          </div>
        </div>
        <div class="pj2">
          {{ item.message }}
        </div>
        <div class="pj_4">
          <lazy-component>
            <img
              v-for="img in evPiclist.slice(0, 3)"
              :key="img.ev_picID"
              v-lazy="img.images"
              @click="show = true"
            />
          </lazy-component>
        </div>
        <div class="pj3">
          {{ item.time }} 颜色：{{ item.Color }} 尺码：{{ item.Size }}
        </div>
        <div v-if="evcount === 1"></div>
        <div v-else class="spantga">
          <van-tag color="#7232dd">再次购买</van-tag>
        </div>
      </div>

      <div class="morepj" v-if="evList.length < 0">
        <a href="pingjialist.html">查看更多评价</a>
      </div>
    </div>
    <van-image-preview v-model="show" :images="imglist"></van-image-preview>
  </div>
</template>
<script>
import { mapState } from "vuex";

export default {
  data() {
    return {
      evList: [],
      evPiclist: [],
      evcount: 0,
      show: false,
      index: 0,
      imglist: [],
    };
  },

  created() {
    this.getEvauation();
  },
  activated() {
    this.getEvauation();
  },
  methods: {
    async getEvauation() {
      const { data: res } = await this.$http.get("getEvaluation", {
        params: {
          gid: this.Goodsid,
          gid2: this.Goodsid,
          gid3: this.Goodsid,
        },
      });
      console.log(res);
      this.evList = res.data;

      this.evPiclist = res.listPic;
      for (var i = 0; i < res.listPic.length; i++) {
        this.imglist.push(res.listPic[i].images);
      }
      console.log(this.imglist);
      this.evcount = res.userCount;
    },
    imgshow() {
      console.log("onChange");
    },
  },
  computed: {
    ...mapState(["Goodsid", "emailLogin"]),
  },
};
</script>
<style lang="less" scoped>
.xqpj {
  padding: 0 0.6rem;
  background: #fff;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  .xqpjtit {
    height: 2rem;
    border-bottom: 1px solid #eee;
    .xqbox2L {
      float: left;
      width: 50%;
      overflow: hidden;
      span {
        color: #666;
        height: 2rem;
        line-height: 2rem;
        font-size: 0.9rem;
      }
    }
    .xqbox2R {
      float: right;
      max-width: 50%;
      overflow: hidden;
      img {
        float: right;
        height: 1rem;
        margin-top: 0.75rem;
      }
    }
  }
  .xqpjbox {
    width: 100%;
    padding-top: 0.5rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.5rem;
    .pj1 {
      height: 1.5rem;
      width: 100%;
      img {
        height: 1.5rem;
        border-radius: 100%;
        width: 1.5rem;
        display: block;
        float: left;
      }
      span {
        color: #666;
        font-size: 0.85rem;
        height: 1.5rem;
        line-height: 1.5rem;
        display: block;
        float: left;
        padding-left: 0.3rem;
      }
    }
    .pj2 {
      padding-top: 0.3rem;
      color: #666;
      font-size: 0.85rem;
      line-height: 1rem;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .pj3 {
      color: #999;
      font-size: 0.75rem;
      line-height: 2rem;
    }
  }
  .morepj {
    text-align: center;
    width: 100%;
    padding: 0.5rem 0;
    a {
      color: #333;
      font-size: 0.8rem;
    }
  }
}
.pj_4 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 7px 0;
  flex-wrap: wrap;
  img {
    width: 110px;
    height: 100px;
    border-radius: 4px;
    margin-top: 4px;
    border: 1px solid #e8e8e8;
    margin-left: 5px;
  }
}
.spantga {
  float: right;
  margin-top: -26px;
  margin-right: 10px;
}
.van-empty {
  height: 140px;
}
.niv {
  height: 2.8rem;
  position: fixed;
  width: 100%;
  max-width: 640px;
  top: 0;
  background: #fff;
  z-index: 1500;
  border-bottom: 1px solid #eee;
}
</style>